<template>
	<view style="height: 100vh;">
		<w-compress ref='wCompress' />
		<view v-if="loadingFlag" class="index-container relative"
			style="position: fixed;background-color: #FFFFFF;top:0;bottom: 0;left: 0;right: 0;z-index: 10;">

			<view style="position: relative;top:0;bottom:0;overflow: hidden;width: 100%;height: 100%;">
				<ai-face :show="show" />
				<image v-if="imgurl!=''" :src="imgurl" style="width: 100vw;" mode="widthFix"></image>
			</view>
			<view class="analysising display-flex-center">
				<i class="iconfont icon-loading"></i>
				<view>{{text}}</view>
			</view>
		</view>

		<my-head :backFlag="backFlag" @click="handleReTry" Data-btnname="拍照教程" bgc="#FFFFFF" v-if="!loadingFlag">
			<view class="text">拍照教程</view>
		</my-head>
		<view class="contain" v-if="!loadingFlag">
				<view style="width: 90%;" class="course uni-flex uni-column">
					<view class="course-font">
						<text>1.摘下眼镜，暴露整个面部，面部表情放松</text>
					</view>
					<view class="course-img uni-flex uni-row display-flex-between">
						<view class="uni-flex uni-column" style="align-items: center;">
							<image src="../../static/mzyj@2x.png" mode="widthFix" />
							<text>没摘下眼镜</text>
						</view>
						<view class="uni-flex uni-column" style="align-items: center;">
							<image src="../../static/mlcet@2x.png" mode="widthFix" />
							<text>没露出额头</text>
						</view>
						<view class="uni-flex uni-column" style="align-items: center;">
							<image src="../../static/sycf3@2x.png" mode="widthFix" />
							<text>正确示范</text>
						</view>
				
					</view>
				</view>
				
				<view style="width: 90%;" class="course uni-flex uni-column">
					<view class="course-font">
						<text>2.面向光源，光源均匀分布，尽量在室内灯光及自然 光线下，注意不要在逆光、昏暗的环境下拍照</text>
					</view>
					<view class="course-img uni-flex uni-row display-flex-center" >
						<view class="uni-flex uni-column" style="align-items: center;">
							<image src="../../static/zqpzsf@2x.png" mode="widthFix" style="width: 630rpx;height: 228rpx;" />
							<view style="margin-top: 10rpx;height: 50rpx;flex-direction: row;display: flex;text-align: center;" >
								 <view style="width: 36rpx;height:36rpx;margin-right: 10rpx;margin-top: 6rpx;">
									 <image src="../../static/ok2@2x.png" style="width: 100%;height:100%;;" />
								 </view>
								<text>正确拍照示范</text>
							</view>
						</view>
					</view>
				</view>
				
				<view style="width: 90%;" class="course uni-flex uni-column">
					<view class="course-font">
						<text>3.最好为素颜，不使用有遮盖性的护肤品、化妆品， 以免影响测肤的真实性</text>
					</view>
					<view class="course-img uni-flex uni-row display-flex-around">
						<view class="uni-flex uni-column" style="align-items: center;">
							<image src="../../static/hzcf@2x.png" mode="widthFix" />
							<text>化妆测肤</text>
						</view>
						<view class="uni-flex uni-column" style="align-items: center;">
							<image src="../../static/sycf3@2x.png" mode="widthFix" />
							<text>素颜测肤</text>
						</view>
					</view>
				</view>
		</view>
		
		
		<view style="width: 100%;position: fixed;bottom: 0rpx;background: #FFFFFF;height: 60rpx;z-index:999; padding: 30rpx 0px;"
		 class="display-flex display-flex-column display-flex-column-center"
		 v-if="!loadingFlag">
		    <view style="width: 90%;" class="course-button" @click="moTest">
			我知道啦，开始拍照
		   </view>	
		</view>
		

		<my-mask :flag="errorFlag" height="280" style="z-index: 999;">
			<view class="text">
				{{ errorText }}
			</view>
			<button class="weui-btn_primary" @click="handleReLoad()" style="width:100%;font-size:14px;"
				Data-btnname="重新拍摄">重新拍摄</button>
		</my-mask>
	</view>
</template>

<script>
	import WCompress from '@/components/w-compress/w-compress.vue'
	import aiFace from '@/components/aiface/index'
	export default {
		components: {
			WCompress,
			aiFace
		},
		data() {
			return {
				backFlag: true,
				errorFlag: false,
				errorText: "",
				show: false,
				loadingFlag: false,
				imgurl: "",
				text: '正在分析中...',
				formInfo: {
					id: "",
					mobile: "",
					gender: "0",
					nickName: "",
					year: "",
					state: "",
					stateName: ""
				}
			}
		},
		onLoad(e) {
			let json = JSON.parse(decodeURIComponent(e.json));
			// console.log("e", json);
			this.formInfo = json;
		},
		onShow() {
			let _this = this;
			_this.handleSugoioLoad('拍照教程页', 'h5-course')
		},
		methods: {
			handleReTry: function() {
				this.$common.back();
			},
			moTest() {
				this.skinText();
			},
			skinText() {
				this.trainFlag = false;
				this.handleUpload();
			},
			async analyse(result) {
				if (result.code == 0) {
					try {
						// result.url = "https://skinck.infinitus-int.com/aiface/profile/upload/2021/07/02/9c385c7a-546c-4218-97e6-140b8a259757.jpg";
						const res = await this.$utils.getApi("aiTest?url=" + result.url + "&userId=" + this.formInfo
							.id + "&assistantShop=" + this.$users.ID + "&faceStatus=" + (this.formInfo.state));

						if (res.code == 500) {
							this.text = '分析失败';
							this.errorFlag = true;
							this.errorText = res.msg;
						} else {
							this.$common.setStorage("TestResult", 1);

							var seconds = parseInt(this.startTime.diffSeconds(new this.XDate()));
							var setTime = (seconds > 6 ? 100 : (6 - seconds) * 1000); //设置动画最小6秒

							setTimeout(() => {
								this.show = this.loadingFlag = false;
								this.$common.to('../skinTestReport/index?shopId=' + this.$users.ID + "&id=" +
									res.data
									.skinRecordId);
							}, setTime);
						}
					} catch (error) {
						console.log("err", error)
						this.errorFlag = true;
						this.errorText = "分析异常，请重试";
					}
				} else {
					this.text = '分析失败';
					this.errorFlag = true;
					this.errorText = "分析异常，请重试";
				}
			},
			handleUpload() {
				try {
					uni.chooseImage({
						count: 1,
						success: (chooseImageRes) => {
							const tempFilePaths = chooseImageRes.tempFilePaths;
							var fileSize = chooseImageRes.tempFiles[0].size;

							if (fileSize > (12 * 1024 * 1024)) {
								this.errorFlag = true;
								this.errorText = "您上传的图片为" + parseFloat((fileSize / 1024) / 1024).toFixed(2) +
									"M，请上传5M以内的图片";
								return;
							}
							this.imgurl = tempFilePaths[0];
							this.show = this.loadingFlag = true;

							var uploadFile = (filePath) => {
								this.startTime = new this.XDate();
								uni.uploadFile({
									url: this.$global.host + '/upload',
									filePath: filePath,
									name: 'file',
									success: (uploadFileRes) => {
										this.analyse(JSON.parse(uploadFileRes.data));
									},
									fail: (error) => {
										this.text = '分析失败';
										this.errorFlag = true;
										this.errorText = "上传异常，请重试";
									}
								});
							}
							
							if (fileSize > (1 * 1024 * 1024)) { //超过1M进行压缩
								//压缩后再上传
								this.$refs.wCompress.start(tempFilePaths[0], {
										pixels: 4000000, // 最大分辨率，默认二百万
										quality: 0.7, // 压缩质量，默认0.8
										type: 'jpg', // 图片类型，默认jpg
										base64: true, // 是否返回base64，默认false，非H5有效
									})
									.then(res => {
										this.imgurl = res;
										uploadFile(res);
									})
									.catch(e => {
										this.errorFlag = true;
										this.errorText = "上传异常，请重试";
									});
							} else {
								uploadFile(tempFilePaths[0]);
							}
						}
					});
				} catch (error) {
					console.log(`error`, error);
				}
			},
			handleReLoad() {
				this.show = this.loadingFlag = false;
				this.errorFlag = false;
				this.text = '正在分析中...'
				this.errorText = "";
			},
		}
	}
</script>

<style lang="scss">
	@mixin info {
		font-size: 12px;
		color: #333333;
		line-height: 17px;
	}

	.contain {
		padding-top: 88rpx;
		padding-bottom: 120rpx;
		width: 100%;
		margin-bottom: 70px;
		// height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		
		

		.course {
			margin: 20rpx 0rpx;
			.course-font {
				font-size: 28rpx;
				// margin-left: 100rpx;
			}

			.course-img {
				margin-top: 20rpx;
				image {
					height: 160rpx;
					width: 160rpx;
				}
			}
		}

	}
	
	.course-button {
		height: 88rpx;
		background: linear-gradient(90deg, #FF6590 0%, #FF6A6A 100%);
		border-radius: 22px;
		text-align: center;
		line-height: 88rpx;
		color: #FFFFFF;
		
	}

	.index-container {
		width: 100%;
		height: 100vh;

		.photo-title {
			width: 100%;
			text-align: center;
			margin-top: -20px;
		}

		.text {
			@include info;
		}

		.rephoto {
			color: #fff;
			font-size: 28rpx;
			right: 28rpx;
			left: unset;
			top: 52rpx;
		}

		.analysising {
			width: 350rpx;
			height: 70rpx;
			color: #fff;
			font-size: 14px;
			border-radius: 15px;
			position: absolute;
			margin-left: calc(50% - 85px);
			background-color: rgba($color: #ff6590, $alpha: 0.4);
			bottom: 20vh;

			.icon-loading {
				animation: move infinite linear 2s;
				margin-right: 5px;

				@keyframes move {
					0% {}

					100% {
						transform: rotate(360deg);
					}
				}
			}
		}
	}

	.face-image {
		width: 100vw;
		height: 0;
		padding-bottom: 84vh;
		overflow: hidden;
		background-position: center center;
		background-repeat: no-repeat;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		background-size: cover;
	}
</style>
